<template>
    <div class="login">
        <div class="content_login">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="登陆名/手机号：" class="login_form">
                    <el-input v-model="form.phone" placeholder="2到4位汉字" @input="passInput"></el-input>
                </el-form-item>
                <el-form-item label="密码：" class="login_form">
                    <el-input v-model="form.password" placeholder="6到12位字母/数字" @input="passInput"></el-input>
                </el-form-item>
                <el-button type="success" round class="login_button" @click="nameInput" :disabled="Disabled">登录
                </el-button>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'login',
        data() {
            return {
                form: {
                    phone: '',
                    password: '',
                },
                name:'',
                hello:'hello',
                Disabled:true,
            }
        },
        methods: {
            nameInput() {
                if(!/^[0-9]{11}$/.test(this.form.phone)){  
                    alert("手机号不合格");
                    this.form.name='';
                }else if(!/^[a-zA-Z0-9]{6,12}$/.test(this.form.password)){
                    alert("密码错误");
                    this.form.password='';
                }else{
                    var paramesdata={
                        mobile:this.form.phone,
                        password:this.form.password,
                    }
                    this.$store.dispatch('allData', {method:"post",url:this.$store.state.baseurl + 'admin/login', selected: 'loginData',paramesdata:paramesdata});
                    if(this.$store.state.loginData){
                        if(this.$store.state.loginData.data.code===400){
                            alert(this.$store.state.loginData.data.message)
                        }else if(this.$store.state.loginData.data.code===200){
                            this.$router.push({ path: 'home' }) 
                        } 
                    }
                }
               
            },
            passInput(){
               if(this.form.phone.trim().length>0 && this.form.password.trim().length>0){
                   this.Disabled=false
               }else{
                   this.Disabled=true
               }
            }
        },
    }
</script>

<style scoped>
    .login {
        background-image: url('../img/login_bg.jpg');
        width: 2000px;
        height: 915px;
        background-size: 100% 100%;
    }

    .content_login {
        width: 400px;
        position: absolute;
        top: 40%;
        left: 50%;
        margin-left: -200px;
        margin-top: -200px;
    }

    .login_move {
        position: relative;
        left: 200px;
        text-decoration: none
    }

    ;
</style>